<template>
    <div class="page details page-range-detail">
        <div class="detail-header">
            <p>{{ title }}</p>
        </div>

        <p-range-detail-form
            ref="form"
            class="detail-form"
            v-model="form"
            :ids="ids"
            :status="status"
            :readonly="readonly"
        />
    </div>
</template>

<script type="text/ecmascript-6">
// import * as Chef from '../js/Chef.js';
import bus from '../../../utils/Eventbus.js';
import pRangeDetailForm from './p-range-detail-form.vue';
import i18n from '../../../lang/index.js';
const $t = i18n.global.t;

export default {
    name: 'range-detail',
    components: { pRangeDetailForm },
    data () {
        return {
            status: 'add',
            loading: false,
            id: '',
            ids: [],
            form: {},
            rules: {
                id: [{ required: true, message: $t('lang.id') + ' ' + $t('lang.required'), trigger: 'blur' }],
                value: [{ required: true, message: $t('lang.value') + ' ' + $t('lang.required'), trigger: 'blur' }]
            }
        };
    },
    computed: {
        title() {
            let tit = this.$route.meta.title + ' ';
            if (this.status === 'add') tit += $t('lang.add');
            else if (this.status === 'mod') tit += $t('lang.edit');
            else tit += $t('lang.detail');
            return tit;
        },
        readonly() {
            return this.status === 'read';
        }
    },
    created() {
        bus.on(this.$options.name + '.init', this.init);
        if (this.status) this.init();
    },
    beforeDestroy() {
        bus.off(this.$options.name + '.init', this.init);
    },
    methods: {
        init({ args } = {}) {
            console.warn('range-detail.init: ', ...arguments);
            if (this.$route.params && this.$route.params.type) this.status = this.$route.params.type;
            if (this.$route.params && this.$route.params.id) this.ids = [this.$route.params.id];
            if (this.$route.params && this.$route.params.ids) this.ids = this.$route.params.ids;
            if (args && args.params && args.params.type) this.status = args.params.type;
            if (args && args.params && args.params.id) this.ids = [args.params.id];
            if (args && args.params && args.params.ids) this.ids = args.params.ids;
            if (args && args.params && args.params.locals && args.params.locals.length) {
                // this.form = Chef.combineRanges(args.params.locals);
                bus.emit('rangesEditor.init', args.params.locals);
            }
        }
    }
};
</script>

<style lang="scss">
.page-range-detail {
}
</style>
